<script setup lang="ts">
import { ref, onMounted, watch, computed, getCurrentInstance } from "vue";
import { store } from "@/pinia/index";
import { loadConfig } from "./utils/view-reader";

const { proxy } = getCurrentInstance()!;
const {
  languageStore,
  tokenStore,
  localStore,
  loadingStore,
  userStore,
  pageControlStore,
  viewConfigStore,
} = store();

const pageControl = computed(() => pageControlStore.get());
const loading = ref(true);

/**
 * 初始化
 */
const init = async () => {
  // 清除Icon默认填充色
  clearIconFill();
};

/**
 * 清除Icon默认填充色
 */
const clearIconFill = () => {
  for (const key in window) {
    if (key.includes("_iconfont_svg")) {
      const content = window[key]
        .toString()
        .replace(/fill="#.{6}"/g, 'fill=""');
      (<any>window)._iconfont_svg_string_4778753 = content;
    }
  }
};

onMounted(async () => {
  loadingStore.loading();
  await init();
  await loadConfig("/views.json");
  // pageControlStore.set("A");
  await localStore.init();
  await languageStore.load();
  if (tokenStore.isLogin()) {
    if (tokenStore.isExpired()) {
      tokenStore.clear();
      tokenStore.notifyToLogin();
    } else {
      await userStore.load();
    }
  }
  loadingStore.done();
  loading.value = false;
});

watch(pageControl, (newVal, oldVal) => {
  const view = viewConfigStore.get(newVal);
  proxy!.$router.push(view.type);
});
</script>

<template>
  <el-config-provider size="small" :z-index="3000">
    <div v-if="loading"></div>
    <div v-else>
      <RouterView />
    </div>
  </el-config-provider>
</template>

<style lang="scss" scoped></style>
